<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="MobileOptimized" content="320">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <!--<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />-->
  <meta name="viewport"
        content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="HandheldFriendly" content="true">
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="format-detection" content="telphone=no, email=no"/>
  <meta name="screen-orientation" content="portrait">
  <meta name="x5-orientation" content="portrait">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="browsermode" content="application">
  <meta name="x5-page-mode" content="app">
  <meta name="msapplication-tap-highlight" content="no">
  <title>武汉网络电视股份有限公司</title>
  <link href="https://cdn.bootcss.com/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
  <script src="http://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
  <script src="https://cdn.bootcss.com/Swiper/4.0.7/js/swiper.min.js"></script>
  <!--<script src="lazyload.min.js"></script>-->
  <style>
    *{padding:0;margin:0;}
    .swiper-container {width: 100vw;height: 100vh;}
    .swiper-pagination-bullet{background: #5f5f5f;opacity: 0.8}
    .swiper-pagination-bullet-active {background: #dcdcdc;}
    .swiper-lazy{width:100vw;height:100vh;background-size: cover;background-position: center -3rem}
    #app{width:300px;height:120px;position: absolute;bottom:100px;left:50%;margin-left:-150px;}
    @keyframes bounce {0%, 20%, 50%, 80%, 100%{ transform: translateY(0)}40%{transform: translateY(-15px)}60%{transform: translateY(-7px)}}
    .jump{animation:bounce 2s infinite;position: absolute;bottom: 0;left:50%;margin-left:-20px;opacity: 0.7;}
  </style>
</head>
<body>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><div class="swiper-lazy" data-background="img/P1-2x.jpg"><div class="swiper-lazy-preloader"></div></div>
      <img src="img/more2.png" class="jump" alt=""><div id="app"></div></div>
    <div class="swiper-slide"><div class="swiper-lazy" data-background="img/P2-2x.jpg"><div class="swiper-lazy-preloader"></div></div>
      <img src="img/more2.png" class="jump" alt=""></div>
    <div class="swiper-slide"><div class="swiper-lazy" data-background="img/P3-2x.jpg"><div class="swiper-lazy-preloader"></div></div>
      <img src="img/more2.png" class="jump" alt=""></div>
    <div class="swiper-slide"><div class="swiper-lazy" data-background="img/P4-2x.jpg"><div class="swiper-lazy-preloader"></div></div>
      <img src="img/more2.png" class="jump" alt=""></div>
    <div class="swiper-slide"><div class="swiper-lazy" data-background="img/P5-2x.jpg"><div class="swiper-lazy-preloader"></div></div>
      <img src="img/more2.png" class="jump" alt=""></div>
    <div class="swiper-slide"><div class="swiper-lazy" data-background="img/P7-2x.jpg"><div class="swiper-lazy-preloader"></div></div>
      <img src="img/more2.png" class="jump" alt=""></div>
    <div class="swiper-slide"><div class="swiper-lazy" data-background="img/P8-2x.jpg"><div class="swiper-lazy-preloader"></div></div>
      <img src="img/more2.png" class="jump" alt=""></div>
    <div class="swiper-slide"><div class="swiper-lazy" data-background="img/P9-2x.jpg"><div class="swiper-lazy-preloader"></div></div>
      <img src="img/more2.png" class="jump" alt=""></div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>
</div>
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    lazy: {
      loadPrevNext: true,
    },
  })
  $("#app").click(function () {
    mySwiper.slideNext()
  })
</script>
</body>
</html>